{% extends 'base.html' %}

{% block title %}学习中心 - 乒乓球培训管理系统{% endblock %}

{% block page_title %}学习中心{% endblock %}

{% block extra_css %}
<style>
    .dashboard-stats {
        margin-bottom: 2rem;
    }

    .stat-card {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        height: 100%;
        border-left: 4px solid;
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .stat-card.primary { border-left-color: #007bff; }
    .stat-card.success { border-left-color: #28a745; }
    .stat-card.info { border-left-color: #17a2b8; }
    .stat-card.warning { border-left-color: #ffc107; }
    .stat-card.danger { border-left-color: #dc3545; }

    .stat-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .stat-icon.primary { color: #007bff; }
    .stat-icon.success { color: #28a745; }
    .stat-icon.info { color: #17a2b8; }
    .stat-icon.warning { color: #ffc107; }
    .stat-icon.danger { color: #dc3545; }

    .stat-number {
        font-size: 2.5rem;
        font-weight: 700;
        margin: 0;
        line-height: 1;
    }

    .stat-label {
        color: #6c757d;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: 0.5rem;
    }

    .dashboard-section {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
    }

    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        color: #2c3e50;
        display: flex;
        align-items: center;
    }

    .section-title i {
        margin-right: 0.5rem;
        color: #17a2b8;
    }

    .balance-card {
        background: linear-gradient(135deg, #17a2b8, #138496);
        color: white;
        border-radius: 15px;
        padding: 2rem;
        text-align: center;
        margin-bottom: 2rem;
    }

    .balance-amount {
        font-size: 3rem;
        font-weight: 700;
        margin: 0;
    }

    .balance-label {
        opacity: 0.9;
        font-size: 1.1rem;
        margin-top: 0.5rem;
    }

    .balance-actions {
        margin-top: 1.5rem;
        display: flex;
        gap: 1rem;
        justify-content: center;
    }

    .schedule-item {
        border: 1px solid #e9ecef;
        border-radius: 10px;
        padding: 1rem;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
        border-left: 4px solid #17a2b8;
    }

    .schedule-item:hover {
        border-color: #17a2b8;
        box-shadow: 0 2px 10px rgba(23, 162, 184, 0.1);
    }

    .schedule-time {
        font-weight: 600;
        color: #17a2b8;
        font-size: 1.1rem;
    }

    .schedule-coach {
        font-weight: 500;
        color: #2c3e50;
        margin: 0.5rem 0;
    }

    .schedule-location {
        font-size: 0.875rem;
        color: #6c757d;
    }

    .coach-card {
        border: 1px solid #e9ecef;
        border-radius: 10px;
        padding: 1rem;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
    }

    .coach-card:hover {
        border-color: #17a2b8;
        box-shadow: 0 2px 10px rgba(23, 162, 184, 0.1);
    }

    .coach-header {
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .coach-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(135deg, #17a2b8, #138496);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        margin-right: 1rem;
        flex-shrink: 0;
    }

    .coach-info {
        flex: 1;
    }

    .coach-name {
        font-weight: 600;
        color: #2c3e50;
        margin: 0;
    }

    .coach-level {
        padding: 0.25rem 0.5rem;
        border-radius: 15px;
        font-size: 0.75rem;
        font-weight: 500;
        margin-left: auto;
    }

    .level-senior { background: #dc3545; color: white; }
    .level-middle { background: #ffc107; color: #212529; }
    .level-junior { background: #28a745; color: white; }

    .coach-meta {
        font-size: 0.875rem;
        color: #6c757d;
        margin: 0;
    }

    .coach-actions {
        margin-top: 0.5rem;
        display: flex;
        gap: 0.5rem;
    }

    .evaluation-item {
        border: 1px solid #e9ecef;
        border-radius: 10px;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .evaluation-header {
        display: flex;
        justify-content: between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .evaluation-coach {
        font-weight: 500;
        color: #2c3e50;
    }

    .evaluation-date {
        font-size: 0.875rem;
        color: #6c757d;
    }

    .evaluation-rating {
        color: #ffc107;
        margin: 0.5rem 0;
    }

    .evaluation-content {
        font-size: 0.875rem;
        color: #6c757d;
        line-height: 1.5;
    }

    .transaction-item {
        display: flex;
        justify-content: between;
        align-items: center;
        padding: 0.75rem 0;
        border-bottom: 1px solid #f8f9fa;
    }

    .transaction-info {
        flex: 1;
    }

    .transaction-type {
        font-weight: 500;
        color: #2c3e50;
        margin: 0;
    }

    .transaction-date {
        font-size: 0.875rem;
        color: #6c757d;
        margin: 0;
    }

    .transaction-amount {
        font-weight: 600;
    }

    .transaction-amount.positive { color: #28a745; }
    .transaction-amount.negative { color: #dc3545; }

    .quick-actions {
        display: flex;
        gap: 1rem;
        margin-top: 1rem;
        flex-wrap: wrap;
    }

    .quick-action-btn {
        flex: 1;
        min-width: 200px;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        text-decoration: none;
        text-align: center;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .quick-action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        text-decoration: none;
    }

    .btn-info-custom {
        background: linear-gradient(135deg, #17a2b8, #138496);
        color: white;
    }

    .btn-success-custom {
        background: linear-gradient(135deg, #28a745, #1e7e34);
        color: white;
    }

    .btn-primary-custom {
        background: linear-gradient(135deg, #007bff, #0056b3);
        color: white;
    }

    .btn-warning-custom {
        background: linear-gradient(135deg, #ffc107, #e0a800);
        color: #212529;
    }

    .empty-state {
        text-align: center;
        padding: 3rem 1rem;
        color: #6c757d;
    }

    .empty-state i {
        font-size: 4rem;
        opacity: 0.3;
        margin-bottom: 1rem;
    }

    .status-badge {
        padding: 0.25rem 0.5rem;
        border-radius: 15px;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .status-confirmed { background: #d4edda; color: #155724; }
    .status-in-progress { background: #d1ecf1; color: #0c5460; }
    .status-completed { background: #f8d7da; color: #721c24; }

    @media (max-width: 768px) {
        .balance-actions {
            flex-direction: column;
        }

        .quick-actions {
            flex-direction: column;
        }

        .quick-action-btn {
            min-width: auto;
        }

        .coach-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .coach-avatar {
            margin-right: 0;
            margin-bottom: 0.5rem;
        }

        .coach-level {
            margin-left: 0;
            margin-top: 0.5rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    {% if error %}
        <div class="alert alert-danger">
            <i class="bi bi-exclamation-triangle me-2"></i>{{ error }}
        </div>
    {% else %}
        <!-- 账户余额 -->
        <div class="balance-card">
            <h2 class="balance-amount">¥{{ "{:.2f}".format(account_balance) if account_balance else "0.00" }}</h2>
            <div class="balance-label">账户余额</div>
            <div class="balance-actions">
                <a href="{{ url_for('accounts.recharge') }}" class="btn btn-light">
                    <i class="bi bi-credit-card me-1"></i>充值
                </a>
                <a href="{{ url_for('accounts.transactions') }}" class="btn btn-outline-light">
                    <i class="bi bi-list-ul me-1"></i>交易记录
                </a>
            </div>
        </div>

        <!-- 统计卡片 -->
        <div class="dashboard-stats">
            <div class="row g-3">
                <div class="col-lg-3 col-md-6">
                    <div class="stat-card info">
                        <div class="stat-icon info">
                            <i class="bi bi-person-hearts"></i>
                        </div>
                        <h3 class="stat-number">{{ stats.total_coaches or 0 }}</h3>
                        <div class="stat-label">我的教练</div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6">
                    <div class="stat-card warning">
                        <div class="stat-icon warning">
                            <i class="bi bi-clock-history"></i>
                        </div>
                        <h3 class="stat-number">{{ stats.pending_applications or 0 }}</h3>
                        <div class="stat-label">待处理申请</div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6">
                    <div class="stat-card success">
                        <div class="stat-icon success">
                            <i class="bi bi-calendar-check"></i>
                        </div>
                        <h3 class="stat-number">{{ week_stats.total_lessons or 0 }}</h3>
                        <div class="stat-label">本周课程</div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6">
                    <div class="stat-card primary">
                        <div class="stat-icon primary">
                            <i class="bi bi-calendar-day"></i>
                        </div>
                        <h3 class="stat-number">{{ today_reservations|length or 0 }}</h3>
                        <div class="stat-label">今日课程</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 今日课程安排 -->
            <div class="col-lg-6">
                <div class="dashboard-section">
                    <h4 class="section-title">
                        <i class="bi bi-calendar-day"></i>今日课程安排
                    </h4>

                    {% if today_reservations %}
                        {% for reservation in today_reservations %}
                        <div class="schedule-item">
                            <div class="schedule-time">
                                {{ reservation.start_time.strftime('%H:%M') if reservation.start_time else '' }} -
                                {{ reservation.end_time.strftime('%H:%M') if reservation.end_time else '' }}
                            </div>
                            <div class="schedule-coach">
                                教练：{{ reservation.coach.real_name if reservation.coach else '未知教练' }}
                            </div>
                            <div class="schedule-location">
                                <i class="bi bi-geo-alt me-1"></i>
                                {{ reservation.table.campus.name if reservation.table and reservation.table.campus else '未知校区' }} -
                                {{ reservation.table.name if reservation.table else '未知球台' }}
                            </div>
                            <div class="mt-2">
                                <span class="status-badge status-{{ reservation.status }}">
                                    {% if reservation.status == 'confirmed' %}已确认
                                    {% elif reservation.status == 'in_progress' %}进行中
                                    {% elif reservation.status == 'completed' %}已完成
                                    {% endif %}
                                </span>
                            </div>
                        </div>
                        {% endfor %}
                    {% else %}
                        <div class="empty-state">
                            <i class="bi bi-calendar-x"></i>
                            <p>今天没有课程安排</p>
                            <small>您可以预约新的课程或联系教练</small>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- 我的教练 -->
            <div class="col-lg-6">
                <div class="dashboard-section">
                    <h4 class="section-title">
                        <i class="bi bi-person-hearts"></i>我的教练
                    </h4>

                    {% if my_coaches %}
                        {% for coach_data in my_coaches %}
                        {% set coach = coach_data[0] %}
                        {% set relation = coach_data[1] %}
                        <div class="coach-card">
                            <div class="coach-header">
                                <div class="coach-avatar">
                                    {% if coach.photo_url %}
                                        <img src="{{ coach.photo_url }}" alt="{{ coach.real_name }}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
                                    {% else %}
                                        {{ coach.real_name[0] if coach.real_name else 'C' }}
                                    {% endif %}
                                </div>
                                <div class="coach-info">
                                    <h6 class="coach-name">{{ coach.real_name }}</h6>
                                    <p class="coach-meta">
                                        ¥{{ "{:.0f}".format(coach.hourly_rate) if coach.hourly_rate else '0' }}/小时 |
                                        建立关系：{{ relation.applied_at.strftime('%Y-%m-%d') if relation.applied_at else '' }}
                                    </p>
                                </div>
                                <div class="coach-level level-{{ coach.coach_level }}">
                                    {% if coach.coach_level == 'senior' %}高级教练
                                    {% elif coach.coach_level == 'middle' %}中级教练
                                    {% elif coach.coach_level == 'junior' %}初级教练
                                    {% endif %}
                                </div>
                            </div>
                            <div class="coach-actions">
                                <a href="{{ url_for('student_coach.detail', coach_id=coach.id) }}" class="btn btn-sm btn-outline-info">
                                    <i class="bi bi-eye me-1"></i>查看详情
                                </a>
                                <a href="{{ url_for('student_reservations.create', coach_id=coach.id) }}" class="btn btn-sm btn-info">
                                    <i class="bi bi-calendar-plus me-1"></i>预约课程
                                </a>
                            </div>
                        </div>
                        {% endfor %}

                        {% if my_coaches|length >= 10 %}
                        <div class="text-center">
                            <a href="{{ url_for('student_coach.my_coaches') }}" class="btn btn-outline-info">
                                查看全部教练
                            </a>
                        </div>
                        {% endif %}
                    {% else %}
                        <div class="empty-state">
                            <i class="bi bi-person-hearts"></i>
                            <p>暂无教练</p>
                            <small>您可以搜索并申请合适的教练</small>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 最近的课程评价 -->
            <div class="col-lg-6">
                <div class="dashboard-section">
                    <h4 class="section-title">
                        <i class="bi bi-star"></i>最近的课程评价
                    </h4>

                    {% if recent_evaluations %}
                        {% for evaluation in recent_evaluations %}
                        <div class="evaluation-item">
                            <div class="evaluation-header">
                                <div class="evaluation-coach">{{ evaluation.coach.real_name if evaluation.coach else '未知教练' }}</div>
                                <div class="evaluation-date">{{ evaluation.created_at.strftime('%m-%d') if evaluation.created_at else '' }}</div>
                            </div>
                            <div class="evaluation-rating">
                                {% for i in range(evaluation.student_rating if evaluation.student_rating else 0) %}
                                    <i class="bi bi-star-fill"></i>
                                {% endfor %}
                                {% for i in range(5 - (evaluation.student_rating if evaluation.student_rating else 0)) %}
                                    <i class="bi bi-star"></i>
                                {% endfor %}
                            </div>
                            {% if evaluation.student_comment %}
                            <div class="evaluation-content">{{ evaluation.student_comment }}</div>
                            {% endif %}
                        </div>
                        {% endfor %}

                        <div class="text-center">
                            <a href="{{ url_for('evaluations.index') }}" class="btn btn-outline-primary">
                                查看全部评价
                            </a>
                        </div>
                    {% else %}
                        <div class="empty-state">
                            <i class="bi bi-star"></i>
                            <p>暂无课程评价</p>
                            <small>完成课程后可以对教练进行评价</small>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- 最近的消费记录 -->
            <div class="col-lg-6">
                <div class="dashboard-section">
                    <h4 class="section-title">
                        <i class="bi bi-wallet2"></i>最近的消费记录
                    </h4>

                    {% if recent_transactions %}
                        {% for transaction in recent_transactions %}
                        <div class="transaction-item">
                            <div class="transaction-info">
                                <p class="transaction-type">
                                    {% if transaction.type == 'recharge' %}账户充值
                                    {% elif transaction.type == 'consume' %}课程费用
                                    {% elif transaction.type == 'refund' %}退款
                                    {% else %}其他交易
                                    {% endif %}
                                </p>
                                <p class="transaction-date">{{ transaction.created_at.strftime('%Y-%m-%d %H:%M') if transaction.created_at else '' }}</p>
                            </div>
                            <div class="transaction-amount {{ 'positive' if transaction.amount > 0 else 'negative' }}">
                                {{ '+' if transaction.amount > 0 else '' }}¥{{ "{:.2f}".format(transaction.amount) if transaction.amount else '0.00' }}
                            </div>
                        </div>
                        {% endfor %}

                        <div class="text-center">
                            <a href="{{ url_for('accounts.transactions') }}" class="btn btn-outline-primary">
                                查看全部交易记录
                            </a>
                        </div>
                    {% else %}
                        <div class="empty-state">
                            <i class="bi bi-wallet2"></i>
                            <p>暂无交易记录</p>
                            <small>您的充值和消费记录将显示在这里</small>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 快捷操作 -->
        <div class="dashboard-section">
            <h4 class="section-title">
                <i class="bi bi-lightning"></i>快捷操作
            </h4>
            <div class="quick-actions">
                <a href="{{ url_for('student_coach.search') }}" class="quick-action-btn btn-success-custom">
                    <i class="bi bi-search me-2"></i>寻找教练
                </a>
                <a href="{{ url_for('student_reservations.index') }}" class="quick-action-btn btn-info-custom">
                    <i class="bi bi-calendar-event me-2"></i>我的预约
                </a>
                <a href="{{ url_for('accounts.balance') }}" class="quick-action-btn btn-primary-custom">
                    <i class="bi bi-credit-card me-2"></i>账户管理
                </a>
                <a href="{{ url_for('evaluations.index') }}" class="quick-action-btn btn-warning-custom">
                    <i class="bi bi-award me-2"></i>学习评价
                </a>
            </div>
        </div>
    {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 自动刷新统计数据
    setInterval(function() {
        fetch('/api/stats')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 更新账户余额
                if (data.stats.account_balance !== undefined) {
                    const balanceElement = document.querySelector('.balance-amount');
                    if (balanceElement) {
                        balanceElement.textContent = '¥' + data.stats.account_balance.toFixed(2);
                    }
                }
                console.log('Stats updated:', data.stats);
            }
        })
        .catch(error => console.error('Error fetching stats:', error));
    }, 30000);
});
</script>
{% endblock %}